<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>数值预报</title>

		<!-- 工具模块配置文件 -->
		<script src="./js/config.js"></script>
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />

		<!--<link rel="stylesheet" type="text/css" href="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />-->
		<link rel="stylesheet" href="//at.alicdn.com/t/font_620219_jb0r0sy6bdl5wmi.css" />
		<link rel="stylesheet" href="css/map.css" />
		<link rel="stylesheet" href="./js/utils/tools/bootstrap.min.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<script src="./js/utils/tools/jquery.min.js"></script>

		<script src="./js/utils/tools/ol.js" type="text/javascript"></script>
		<script src="./js/utils/tools/turf.min.js" type="text/javascript"></script>
		<script src="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/init.js"></script>
		<!--<script src="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/init.js"></script>-->
		<script src="./js/utils/tools/bootstrap.min.js"></script>

		<script src="./js/kriging.js" type="text/javascript"></script>
		<script src="./js/utils/tools/WKTUtil.js" type="text/javascript"></script>
		<script src="./js/utils/tools/mapTran.js" type="text/javascript"></script>

		<!-- layui -->
		<script src="./js/layui/layui.js"></script>
		<script src="./js/Hawkeye.js"></script>

		<!-- 工具条 -->
		<script src="./js/commonTools.js"></script>
		<script src="./js/index.js"></script>
		<script src="js/TDTRoadLayer.js"></script>

	</head>

	<body class="sn-body">

		<div id="map">
			<div class="slider-box">
				<div class="zoom-in zoombtn">
					<span>+</span>
				</div>
				<div class="zoom-out zoombtn">
					<span>-</span>
				</div>
			</div>
		</div>
		<form class="layui-form" action="">
			<div id="timePickContainer" class="panel panel-primary">
				<div class="select-panel">
					<div style="width: 120px;float: left;">
						<input type="text" class="form-control" id="dataTimeSelect">
					</div>
					<div style="width: 100px;float: left;">
						<select class="form-control selectStyle" id="timeSelectOptions" lay-filter="timeSelectFilter">
							<!-- 四川区域模式 -->
							<option>2时</option>
							<option>8时</option>
							<option>14时</option>
							<option>20时</option>
							<!-- 欧洲中心 -->
							<option>8时</option>
							<option>20时</option>
						</select>
					</div>
					<div style="width: 120px;float: left;">
						<select class="form-control selectStyle" name="area" lay-filter="areaSelectFilter" id="areaSelectOptions">
							<option value="0" selected>遂宁市</option>
							<option value="1">船山区</option>
							<option value="2">安居区</option>
							<option value="3">蓬溪县</option>
							<option value="4">射洪县</option>
							<option value="5">大英县</option>
						</select>
					</div>
				</div>
			</div>
		</form>
		
		<!--工具等内容-->
		<div class="tools-box">
			<ul class="toolList">
				<li id="toolbar">
					<i class="iconfont icon-gongju"></i>
					<!--<b class="wrench"></b>-->
					<span>工具</span>
				</li>
				<li class="line">|</li>
				<li id="legendbar" class="active">
					<i class="iconfont icon-ditu"></i>
					<span>图例</span>
				</li>
			</ul>
		</div>
		
		<div class="operatebar commontool sn-tool">
			<div class="middlebox">
				<div class="editbtn" id="roadnetworktool">
					<i class="iconfont icon-vector"></i>
					<span>矢量</span>
				</div>
				<div class="editbtn" id="planettool">
					<i class="iconfont icon-weixing"></i>
					<span>影像</span>
				</div>
				<div class="editbtn" id="fullextenttool">
					<i class="iconfont icon-quantu"></i>
					<span>全图</span>
				</div>
				<div class="editbtn" id="distancetool">
					<i class="iconfont icon-celiang1"></i>
					<span>测距</span>
				</div>
				<div class="editbtn" id="areatool">
					<i class="iconfont icon-mianji"></i>
					<span>面积</span>
				</div>
				<div class="editbtn" id="rectangletool">
					<i class="iconfont icon-box-select"></i>
					<span>框选</span>
				</div>
				<div class="editbtn" id="polygontool">
					<i class="iconfont icon-xuanze"></i>
					<span>自由选择</span>
				</div>
				<div class="editbtn" id="weatherplot">
					<i class="iconfont icon-icon-mian"></i>
					<span>气象标绘</span>
				</div>
				<div class="editbtn" id="cleartool" style="border: none;">
					<i class="iconfont icon-clean"></i>
					<span>清除</span>
				</div>
			</div>
		</div>
		<!--控制面板的按钮-->
		<div class="conceal rt">
			&lt;&lt;<span>控制面板</span>
		</div>
		<div id="rainfallForecastContainer" class="panel panel-primary">

			<div class="panel-heading">
				<p class="topTip lf">控制面板</p>
				<div class="openTrol rt">
					<span>隐藏</span>&gt;&gt;
				</div>
				</h3>
			</div>
			<div class="panel-body">
				<!-- 选择类型 -->
				<div class="config-container">
					<div class="config-tiltle"><span>选择类型</span></div>
					<div class="config-content">
						<label class="radio-inline">
						<input type="radio" name="typeSelectOptions" id="southWestModel" value="西南区域模式"> 西南区域模式
					</label>
						<label class="radio-inline">
						<input type="radio" name="typeSelectOptions" id="europeanModel" value="欧洲中心"> 欧洲中心
					</label>
					</div>
				</div>

				<!-- 预报时次 -->
				<div class="config-container">
					<div class="config-tiltle"><span>预报时次</span></div>
					<div class="config-content">
						<div class="radio">
							<label>
							<input type="radio" name="validTimeOptions" checked="checked" id="validTime3" value="3"> 3小时降水
						</label>
						</div>
						<div class="radio">
							<label>
							<input type="radio" name="validTimeOptions" id="validTime6" value="6"> 6小时降水
						</label>
						</div>
						<div class="radio">
							<label>
							<input type="radio" name="validTimeOptions" id="validTime12" value="12"> 12小时降水
						</label>
						</div>

					</div>
				</div>

				<!-- 图层控制 -->
				<div class="config-container">
					<div class="config-tiltle"><span>图层控制</span></div>
					<div class="config-content">
						<label class="checkbox-inline">
						<input type="checkbox" id="displayValue" value=""> 
						<label for="displayValue">数值标注</label>
					</label>
						<label class="checkbox-inline">
						<input type="checkbox" id="spotMap" value="" checked="checked"> 
						<label for="spotMap">色斑图</label>
					</label>
					</div>
				</div>

			</div>
		</div>

		<!-- 图例 -->
		<div id="segmentedColorContainer">
			<div id="segmentedColorTitle">
				<span>降水量(kg/m²)</span>
				<span id="dateInfo">2018-3-26 14时</span>
			</div>
			<div id="segmentedColor"></div>
			<div id="segmentedColorValue"></div>
		</div>

	</body>

</html>